<template>
  <div class="ranklist">
    <div class="rankTop">
      <div class="shang">
        <i class="iconfont icon-fanhui left" @click="$router.go(-1)"></i>
        <span>排行榜</span>
      </div>

      <div class="tab">
        <ul class="nav">
          <li :class="{ liactive: n == 1 }" @click="n = 1">云音乐特色榜</li>
          <li :class="{ liactive: n == 2 }" @click="n = 2">全球媒体榜</li>
        </ul>
      </div>
    </div>
    <div v-show="n == 1" class="teseb">
      <div class="rankContent">
        <div class="rankCtItem" v-for="(item, index) in listData.slice(0, 4)" :key="index"
          @click="listdetails(item.id)">
          <div class="title">
            <h2>{{ item.name }}</h2>
            <!-- <span>1</span> -->
          </div>
          <div class="content">
            <div class="img" v-for="(t, i) in item.tracks.slice(0, 1)" :key="i">
              <img :src="t.al.picUrl" alt="" />
            </div>
            <ul class="list">
              <li v-for="(t, i) in item.tracks.slice(0, 3)" :key="i">
                <span class="garde">{{ i + 1 }}</span>
                <span class="first">{{ t.al.name }}</span>
                <span class="second">-{{ t.ar[0].name }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div v-show="n == 2" class="quanqb">
      <div class="rankContent">
        <div class="rankCtItem" v-for="(item, index) in listData.slice(4, listData.length)" :key="index"
          @click="listdetails(item.id)">
          <div class="title">
            <h2>{{ item.name }}</h2>
            <!-- <span>1</span> -->
          </div>
          <div class="content">
            <div class="img" v-for="(t, i) in item.tracks.slice(0, 1)" :key="i">
              <img :src="t.al.picUrl" alt="" />
            </div>
            <ul class="list">
              <li v-for="(t, i) in item.tracks.slice(0, 3)" :key="i">
                <span class="garde">{{ i + 1 }}</span>
                <span class="first">{{ t.al.name }}</span>
                <span class="second">-{{ t.ar[0].name }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTopList, getPlayListDetail } from "@/api/home";
export default {
  data() {
    return {
      n: 1,
      listData: [],
     
    };
  },
  //组件前置路由
  beforeRouteEnter(to, from, next) {
    //请求第一个接口
    getTopList().then((data) => {
      next((vm) => vm.getaccessListContent(data.list));
    });
  },
  methods: {
    async getaccessListContent(list) {
      //请求第二个接口
      let item = [];
      for (let i = 0; i < list.length; i++) {
        let id = list[i].id;
        await getPlayListDetail({ id }).then((data) => {
          item.push(data.playlist);
          this.listData = Array.from(new Set(item));
          // console.log(this.listData);
        });
      }
    },
    //跳转排行榜详情
    listdetails(id) {
      this.$router.push({
        path: "/listdetails",
        query: {
          id: id
        }
      })

    }
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>

.ranklist {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  .rankTop {
    width: 100%;
    position: fixed;
    background-color: #eaeff9;
    .shang {
      display: flex;
      align-items: center;
      i {
        font-size: 20px;
        margin: 0 10px;
      }

      span {
        font-weight: bold;
        font-size: 16px;
      }
    }
    .tab {
      .nav {
        padding: 13px 35px;
        display: flex;
        justify-content: space-between;
        li {
          &.liactive {
            border-bottom: 4px solid #f74a42;
          }
        }
      }
    }
  }
  .teseb {
    padding-top: 66px;
  }
  .rankContent {
    background-color: #f7f7f7;
    padding: 20px;
      .rankCtItem {
        width: 100%;
        background-color: #ffffff;
        border-radius: 20px;
       margin-bottom: 20px;
        border: 1px solid #EFEFEF;
        .title {
          display: flex;
          padding: 20px;
       
          justify-content: space-between;
          h2 {
            font-weight: bold;
            font-size: 20px;
          }
          span {
            color: #888;
            font-size: 14px;
          }
        }
     
      .content {
        width: 100%;
        display: flex;
        background-color: #fff;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        padding-bottom: 20px;
        .img {
          flex: 0 0 100px;
          margin: 0 20px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
          }
        }

        .list {
          width: 90%;
          margin-right: 20px;
          overflow: hidden;

          li {
            line-height: 35px;
            white-space: nowrap;
            text-overflow: ellipsis;

            .garde,
            .first {
              font-weight: bold;
              color: #434a5a;
            }

            .first {
              padding-left: 7.5px;
            }

            .second {
              color: #aaacb4;
            }
          }
        }
      }
      }
    }
  }

  .quanqb {
    padding-top: 66px;
  }

</style>